import React, { useState } from 'react';
import { Form, Input, Icon, Button, Select, Switch ,Row, Col} from 'antd';
import shortid from 'shortid';


const { Option } = Select;
const {Item} = Form;
let id = 0;

const DynamicFieldSet = ({form,timeDifferenceInfoData}) => {
  const initData = timeDifferenceInfoData.reduce((pre, {id, ...rest}) => ({...pre, [id]: {id, ...rest}}), {}) || {}
  const { getFieldDecorator, getFieldValue, setFieldsValue, validateFields } = form;
  const [data, setData] = useState(getFieldValue('data') || initData)
  const addItem = function addItem() {
    setData({...data, [shortid.generate()]: {}})
  }

  const removeItem = function removeItem (id) {
    setData(Object.keys(data)
            .filter(key=> key!== id)
            .reduce((pre,cur) => ({...pre, [cur]: data[cur]}), {}))
  }
  const handleSubmit = e => {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        const { list, names } = values;
        console.log(' ', values);
      }
    });
  };
  const formItemLayout = {
    labelCol: {
      xs: { span: 2},
      sm: { span: 2 },
    },
    wrapperCol: {
      xs: { span: 22, offset: 0 },
      sm: { span: 22, offset: 0 },
    },
  };
  const formItemLayout1 = {
    labelCol: {
      xs: { span: 2 },
      sm: { span: 3 },
    },
    wrapperCol: {
      xs: { span: 26, offset: 0 },
      sm: { span: 26, offset: 0 },
    },
  };
  const formItemLayoutWithOutLabel = {
    labelCol: {
      xs: { span: 1 },
      sm: { span: 1 },
    },
    wrapperCol: {
      xs: { span: 11, offset: 1 },
      sm: { span: 11, offset: 1 },
    },
  };
  const formItemS = {
    labelCol: {
      xs: { span: 2 },
      sm: { span: 2 }
    }
  }

  const formItems = data && Object.keys(data).map((key, index) => (
    <>
      <Row type="flex" justify="start">
      <Col>
        <Item
          {...formItemLayout}
          label={index + 1}
          required={false}
          key={key}
        >
          <span>改签航班时差</span>

          {getFieldDecorator(`data.${key}.overWeightTktno`, {
            initialValue: data[key].overWeightTktno || ''
          })(
            <Select style={{ width: 70, margin: '0 10px' }}>
              <Option value="<">&lt;</Option>
              <Option value=">">&gt;</Option>
              <Option value="<=">&le;</Option>
              <Option value=">=">&ge;</Option>
              <Option value="=">=</Option>
            </Select>
          )}
        </Item>
      </Col>
      <Col>
      <Item
        {...formItemLayout1}
        required={false}
        key={key}
      >
        {getFieldDecorator(`data.${key}.conditionValue`, {
          initialValue: data[key].conditionValue || '',
          validateTrigger: ['onChange', 'onBlur'],
          rules: [{
            pattern: /^([1-9][0-9]*)+$/,
            message: '只能大于0的整数'
            }],
        })(<Input style={{ width: 70, margin: '0 10px', textAlign: 'center' }} />)}
        <span>时，补偿标准按原航班舱位全价</span>
      </Item>
      </Col>
      <Col>
        <Item
          {...formItemLayout1}
          required={false}
          key={key}
        >
          {getFieldDecorator(`data.${key}.damagePart`, {
            initialValue: data[key].damagePart || '',
            validateTrigger: ['onChange', 'onBlur'],
            rules: [{
              pattern: /^([1-9][0-9]*)+$/,
              message: '只能大于0的整数'
              }],
          })(<Input style={{ width: 70, margin: '0 10px', textAlign: 'center' }} />)}
          <span>%</span>或补偿
          {getFieldDecorator(`data.${key}.payMoney`, {
            initialValue: data[key].payMoney || '',
            validateTrigger: ['onChange', 'onBlur'],
            rules: [{
              pattern: /^([1-9][0-9]*)+$/,
              message: '只能大于0的整数'
              }],
          })(<Input style={{ width: 70, margin: '0 10px', textAlign: 'center' }} />)}
          <span>元</span>
          { Object.keys(data).length > 1 ? (
            <Icon
              className="dynamic-delete-button"
              type="minus-circle-o"
              style={{ width: 70, margin: '0 10px' }}
              onClick={() => removeItem(key)}
            />
          ) : null}
        </Item>
      </Col>
      </Row>
    </>
  ));
  return (
    <>
      <span>改签航班时差：改签新航班计划起飞时间-原航班计划起飞时间</span>
      <Item {...formItemLayoutWithOutLabel}></Item>
      {formItems}
      <Item {...formItemLayoutWithOutLabel}>
        <Button type="dashed" onClick={addItem} style={{ width: '60%' }}>
          <Icon type="plus" />
        </Button>
      </Item>
    </>
  );
}
export default DynamicFieldSet;
